{extend name='wechat@api/review/main'}

{block name='content'}
<div class="header"><span>{:date('H:i')}</span></div>
<div class="container">
    <div class="logo">A</div>
    <div class="content arrow">
        <a class="icon icon-volume left-text"></a>
        <a href="javascript:void(0)" id="audio_btn" class="icon icon-pause"></a>
        <audio id="audio"><source src="{$url|default=''}"></audio>
        <script>
            var audio = document.getElementById('audio');
            var button = document.getElementById('audio_btn');
            setInterval(function () {
                button.className = audio.paused ? 'icon icon-play' : 'icon icon-pause';
            }, 500);
            button.onclick = function () {
                audio.paused ? audio.play() : audio.pause()
            }
        </script>
    </div>
</div>
{/block}

{block name='style'}
<style>
    .left-text{margin:0!important;color:#ccc!important}
    .icon{color:#666;font-size:1.5rem;margin-left:2.5rem;line-height:1.5rem}
</style>
{/block}